<template>
	<div class="main">
		<el-input-number
			v-model="numMin"
			@change="handleChange"
			:min="0"
			:max="999999"
			label="最小值"
		></el-input-number>
		~
		<el-input-number
			v-model="numMax"
			@change="handleChange"
			:min="numMin"
			:max="999999"
			label="最大值"
		></el-input-number>
	</div>
</template>
<script>
export default {
	data() {
		return {
			numMin: 0,
			numMax: 0,
			reset: true
		};
	},
	props: {
		value: [String, Number]
	},
	watch: {
		value(val) {
			if (this.reset) {
				this.numMin = Number(val.split('-')[0]);
				this.numMax = Number(val.split('-')[1]);
			}
		}
	},
	methods: {
		handleChange() {
			this.reset = false;
			this.$emit(
				'input',
				this.numMin + '-' + (this.numMax > this.numMin ? this.numMax : this.numMin)
			);
		}
	}
};
</script>
<style lang="stylus" scoped>
.main {
    display flex
    justify-content space-between
}
</style>
